<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>条件与渲染</title>
</head>
<body>
	<div id="app">
		<h1>1.v-if</h1>
		<div :style="styleObject" v-if="helloVue">
			<p>v-if="helloVue"</p>
		</div>
		<div :style="styleObject" v-else>
			<p>v-else</p>
		</div>
	<hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
	<h1>2.template v-if</h1>
	<template v-if="tpl">
		<h1>代码块头部</h1>
		<p>代码块主体</p>
		<p>代码块底部</p>
	</template>
	<hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
	<h1>3.v-show</h1>
	<div :style="styleObject" v-show="helloVue">
			<p>v-show="helloVue"</p>
		</div>
	</div>
	<p>v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display。</p>


	<script type="text/javascript" src="../lib/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				helloVue:true,
				styleObject:{
					backgroundColor:'red',
					minWidth:'100px',
					minHeight:'100px',
					float:'left',
					margin:'5px'
				},
				tpl:true
			}
		})
	</script>
</body>
</html>